<template>
  <div class="SellDetails">
    <a-card>
      <a-form>
        <a-form-item label="订单编号" :label-col="{ span: 2}" :wrapper-col="{ span: 16}">
          <span>{{orderCode}}</span>
        </a-form-item>
        <a-row>
          <a-col :span="8">
            <a-form-item label="支付金额" :label-col="{ span: 6}" :wrapper-col="{ span: 16}">
              <span style="color:red">{{payAmount}}元</span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="优惠前金额" :label-col="{ span: 6}" :wrapper-col="{ span: 16}">
              <span>{{beforeDiscountPayAmount}}元</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        bordered
        :rowKey="record => record.goodsName"
      >
        <template slot="serialNumber" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
      </a-table>
    </a-card>
    <a-card style="margin-top:2%;height:600px;">
      <div class="popForm">
        <ul>
          <li v-for="item in openPicList" :key="item.index">第{{item.floor}}层</li>
        </ul>
        <p>上货前图片：</p>
        <ul>
          <li v-for="item in openPicList" :key="item.index">
            <img :src="item.picUrl" alt>
          </li>
        </ul>
        <p>上货后图片：</p>
        <ul>
          <li v-for="item in closePicList" :key="item.index">
            <img :src="item.picUrl" alt>
          </li>
        </ul>
      </div>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "serialNumber ",
    scopedSlots: { customRender: "serialNumber" },
    align: "center"
  },
  {
    title: "商品名称",
    dataIndex: "goodsName",
    scopedSlots: { customRender: "goodsName" },
    align: "center"
  },
  {
    title: "购买数量",
    dataIndex: "number",
    scopedSlots: { customRender: "buyNumber" },
    align: "center"
  },
  {
    title: "订单价格",
    dataIndex: "payAmount",
    scopedSlots: { customRender: "orderPrice" },
    align: "center"
  },
  {
    title: "优惠前金额",
    dataIndex: "beforeDiscountPayAmount",
    scopedSlots: { customRender: "discountsBeforeSum" },
    align: "center"
  },
  {
    title: "促销活动",
    dataIndex: "salesAmount",
    scopedSlots: { customRender: "salesAmount" },
    align: "center"
  },
  {
    title: "是否有优惠券",
    dataIndex: "isCoupon",
    scopedSlots: { customRender: "isCoupon" },
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];
export default {
  name: "SellDetails",
  data() {
    return {
      columns,
      data: [],
      orderCode: "",
      beforeDiscountPayAmount: "",
      payAmount: "",
      closePicList: [],
      openPicList: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 销售订单明细
    getAgentBackendOrderDetails() {
      this.axios
        .post(this.baseUrl + "/order/getAgentBackendOrderDetails", {
          loginToken: this.$store.state.loginToken,
          orderId: this.$store.state.orderId
        })
        .then(response => {
          console.log(response);
          this.orderCode = response.data.data.orderCode;
          this.beforeDiscountPayAmount =
            response.data.data.beforeDiscountPayAmount;
          this.payAmount = response.data.data.payAmount;
          this.data = response.data.data.detailsChildrenVOS;
          this.closePicList = response.data.data.closePicList;
          this.openPicList = response.data.data.openPicList;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.getAgentBackendOrderDetails();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.SellDetails {
  width: 100%;
}
.popForm {
  padding: 0 1%;
}
.popForm ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.popForm li {
  margin: 0 1%;
}
.popForm img {
  width: 100%;
}
.popForm p {
  margin: 1% 0;
}
.hide {
  display: none;
}
</style>
